<template>
  <div class="main-layout">
    <div class="title-bar" @mousedown="startDrag" @dblclick="toggleMaximize">
      <div class="title-bar-drag-region"></div>
      <div class="title">待办事项</div>
      <div class="window-controls">
        <button @click.stop="minimizeWindow" class="control-button" title="最小化">&#xE921;</button>
        <button @click.stop="toggleMaximize" class="control-button" :title="isMaximized ? '向下还原' : '最大化'">
          <span v-if="isMaximized">&#xE923;</span>
          <span v-else>&#xE922;</span>
        </button>
        <button @click.stop="triggerMainWindowClose" class="control-button close-button" title="关闭">&#xE8BB;</button>
      </div>
    </div>
    <div class="main-content-wrapper">
      <nav class="sidebar">
        <ul class="nav-links">
          <li><router-link to="/collection-box" active-class="active-link"><span class="nav-icon">&#xE7EE;</span> 收集箱</router-link></li>
          <li><router-link to="/" exact active-class="active-link"><span class="nav-icon">&#xE163;</span> 今天</router-link></li>
          <li><router-link to="/calendar" active-class="active-link"><span class="nav-icon">&#xE787;</span> 日历</router-link></li>
          <li><router-link to="/pomodoro" active-class="active-link"><span class="nav-icon">&#xE8EF;</span> 番茄时钟</router-link></li>
          <li><router-link to="/reminder" active-class="active-link"><span class="nav-icon">&#xE823;</span> 定时提醒</router-link></li>
          <li><router-link to="/archive" active-class="active-link"><span class="nav-icon">&#xE8DE;</span> 历史库</router-link></li>
          <!-- 更多导航项 -->
        </ul>
        <div class="sidebar-footer">
          <button @click="enterMiniMode" class="sidebar-button mini-mode-toggle-button" title="切换迷你模式">
            <span class="nav-icon">&#xE8EF;</span> 迷你模式
          </button>
          <router-link to="/settings" class="sidebar-button settings-button" active-class="active-link">
            <span class="nav-icon">&#xE713;</span> 设置
          </router-link>
        </div>
      </nav>
      <div class="content-area">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
// const { ipcRenderer } = window.require ? window.require('electron') : { ipcRenderer: null }; // REVERTED (Removed)
const ipcRenderer = window.electronAPI; // Using contextBridge exposed API

export default {
  name: 'MainLayout',
  data() {
    return {
      isMaximized: false,
      dragStartX: 0,
      dragStartY: 0,
    };
  },
  mounted() {
    if (ipcRenderer) {
      ipcRenderer.on('window-maximized', () => {
        this.isMaximized = true;
      });
      ipcRenderer.on('window-unmaximized', () => {
        this.isMaximized = false;
      });
      // 获取初始最大化状态
      ipcRenderer.invoke('get-initial-maximize-status').then(status => {
        this.isMaximized = status;
      });
    }
  },
  methods: {
    startDrag(event) {
      if (event.target.classList.contains('control-button') || event.target.closest('.control-button')) {
        return; // 如果点击的是控制按钮，则不拖动
      }
      if (ipcRenderer) {
        // 通知主进程开始拖动窗口
        // 注意：Electron 没有直接的 startDrag API 给渲染进程调用来移动整个窗口
        // 通常，无边框窗口的拖动是通过 CSS (-webkit-app-region: drag) 实现的
        // 或者在主进程中处理 mousemove 事件。为了简单起见，我们先依赖 CSS。
        // 这里的方法更多是用于处理双击最大化等逻辑，真正的拖动建议使用 CSS。
        // 但为了双击最大化，我们需要记录鼠标位置或状态。
      }
    },
    minimizeWindow() {
      if (ipcRenderer) {
        ipcRenderer.send('minimize-window');
      }
    },
    toggleMaximize() {
      if (window.electronAPI) { // Ensure using window.electronAPI
        window.electronAPI.send('maximize-unmaximize-window');
      }
    },
    triggerMainWindowClose() {
      if (window.electronAPI) {
        // This will now just tell the main process to initiate its standard close procedure
        window.electronAPI.send('initiate-window-close'); 
      }
    },
    enterMiniMode() {
      const timestamp = new Date().toISOString();
      console.log(`[MainLayout.vue] enterMiniMode CALLED. Vuex miniMode before send: ${this.$store.state.settings.miniMode}. Timestamp: ${timestamp}`);
      try {
        // Attempt to generate a stack trace
        throw new Error(`Stack trace for enterMiniMode invocation at ${timestamp}`);
      } catch (e) {
        // Log the stack trace; ensure it's a string and doesn't break logging if undefined.
        const stack = e.stack ? e.stack.toString() : "Stack trace not available";
        console.log(stack);
      }

      if (window.electronAPI) {
        const currentMiniMode = this.$store.state.settings.miniMode;
        // Send the opposite of the current state to toggle
        window.electronAPI.send('toggle-mini-mode-visuals', !currentMiniMode);
      } else {
        console.error("[MainLayout.vue] window.electronAPI is not available in enterMiniMode.");
      }
    },
    // 添加一个占位符方法，如果未来"设置"页面需要从这里触发
    goToSettings() {
      this.$router.push('/settings').catch(err => {
        if (err.name !== 'NavigationDuplicated') {
          console.error(err);
        }
      });
    }
  },
  beforeDestroy() {
    if (ipcRenderer) {
      ipcRenderer.removeAllListeners('window-maximized');
      ipcRenderer.removeAllListeners('window-unmaximized');
    }
  }
};
</script>

<style lang="scss" scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--theme-bg-app-wrapper); 
}

.title-bar {
  height: 40px;
  background-color: var(--theme-bg-titlebar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-sm) 0 var(--spacing-base);
  user-select: none;
  -webkit-app-region: drag;
  flex-shrink: 0;
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
}

.title-bar-drag-region {
  /* 如果需要，可以给这个区域明确的大小，但通常标题栏的空白处就是拖动区域 */
  /* -webkit-app-region: drag; 已在父级设置 */
}

.title {
  font-size: var(--font-size-lg); 
  color: var(--theme-text-primary);
  font-weight: var(--font-weight-semibold);
  margin-right: auto;
  padding-left: var(--spacing-xs);
  line-height: 40px;
}

.window-controls {
  display: flex;
  height: 100%;
  -webkit-app-region: no-drag;
}

.control-button {
  font-family: var(--font-family-icons);
  background: transparent;
  border: none;
  color: var(--theme-text-secondary);
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; /* Keep min-width for consistent button size */
  outline: none;
  transition: background-color var(--transition-duration-short) var(--transition-timing-function), color var(--transition-duration-short) var(--transition-timing-function);
}

.control-button:hover {
  background-color: var(--theme-bg-hover, var(--d-bg-hover)); /* Fallback for safety during transition */
  color: var(--theme-text-primary);
  }

.control-button.close-button:hover {
  background-color: #EF4444; /* Retaining specific error color for close, or define a semantic var like --theme-bg-error */
  color: var(--theme-text-on-accent); 
}

.main-content-wrapper {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.sidebar {
  width: 220px;
  min-width: 220px;
  background-color: var(--theme-bg-sidebar);
  padding: var(--spacing-base) 0;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-right: var(--border-width) var(--border-style) var(--theme-border-primary);
  /* box-shadow: 2px 0 5px rgba(var(--theme-shadow-color-rgb, var(--d-shadow-color-rgb)), var(--theme-shadow-opacity-subtle, var(--d-shadow-opacity-light))); */ 
}

/* Empty line added for linter */

  .sidebar-header {
  padding: 0 var(--spacing-base) var(--spacing-base) var(--spacing-base);
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
  margin-bottom: var(--spacing-sm);
  }

  .nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
  flex-grow: 1;
  overflow-y: auto;
}

.nav-links li a {
      display: flex;
      align-items: center;
  padding: var(--spacing-md) var(--spacing-base);
  color: var(--theme-text-secondary);
      text-decoration: none;
  font-size: var(--font-size-base);
  border-radius: var(--border-radius-base);
  margin: var(--spacing-xs) var(--spacing-md);
  transition: background-color var(--transition-duration-base) var(--transition-timing-function), color var(--transition-duration-base) var(--transition-timing-function);
  font-weight: var(--font-weight-normal);
}

.nav-links li a .nav-icon { /* Specific to icons within nav-links > a */
  font-family: var(--font-family-icons);
  margin-right: var(--spacing-md);
  font-size: var(--font-size-lg); 
  /* color: var(--d-text-secondary); Inherits from parent 'a' by default, can override if needed */
      }

.nav-links li a:hover {
  background-color: var(--theme-bg-hover, var(--d-bg-hover)); /* Fallback */
  color: var(--theme-text-primary);
}

.nav-links li a:hover .nav-icon {
  /* color: var(--d-text-primary); Inherits from parent 'a' on hover */
      }

.nav-links li a.active-link {
  background-color: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
  box-shadow: 0 0 10px rgba(var(--theme-accent-primary-rgb), 0.3);
}

.nav-links li a:hover:not(.active-link) {
  background-color: var(--theme-bg-hover, var(--d-bg-hover)); /* Fallback */
  color: var(--theme-text-primary);
}

.nav-icon {
  font-family: var(--font-family-icons);
  margin-right: var(--spacing-base);
  font-size: var(--font-size-md);
  }

  .sidebar-footer {
  padding: var(--spacing-base) var(--spacing-base);
  border-top: var(--border-width) var(--border-style) var(--theme-border-primary);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

    .sidebar-button {
      display: flex;
      align-items: center;
  padding: var(--spacing-sm) var(--spacing-base);
  background-color: transparent;
  color: var(--theme-text-secondary);
  border: var(--border-width) solid transparent; /* Maintain layout */
  border-radius: var(--border-radius-base);
  text-decoration: none;
  font-size: var(--font-size-base);
      width: 100%;
  box-sizing: border-box;
      cursor: pointer;
  transition: background-color var(--transition-duration-short), color var(--transition-duration-short), border-color var(--transition-duration-short);
      }

.sidebar-button:hover {
  background-color: var(--theme-bg-hover, var(--d-bg-hover)); /* Fallback */
  color: var(--theme-text-primary);
  border-color: var(--theme-border-secondary, var(--d-border-secondary-color)); /* Fallback */
      }

.sidebar-button.active-link {
  background-color: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
  border-color: var(--theme-accent-primary);
}

.content-area {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0; /* Content itself should manage its padding */
  background-color: var(--theme-bg-content-area); /* Added this line */
}

</style>
